1. Pengenalan Framework CSS Bootstrap

1. Pengertian CSS Framework
2. Pengertian Bootstrap
3. Sejarah dan perkembangan Bootstrap
4. Kelebihan dan kekurangan Bootstrap
5. Contoh website yang menggunakan Bootstrap

2. Instalasi dan Setup Bootstrap

1. Cara menggunakan Bootstrap melalui CDN
2. Cara menggunakan Bootstrap melalui download file
3. Struktur file Bootstrap (CSS dan JavaScript)
4. Menghubungkan Bootstrap ke file HTML
5. Membuat halaman HTML pertama dengan Bootstrap

3. Sistem Grid pada Bootstrap

1. Pengertian Grid System
2. Konsep container
3. Konsep row
4. Konsep column
5. Pembagian kolom (12 grid system)
6. Membuat layout sederhana menggunakan grid
7. Nested grid (grid di dalam grid)

4. Komponen Layout Bootstrap

1. Container dan container-fluid
2. Margin dan padding utilities
3. Display utilities
4. Flexbox utilities
5. Alignment utilities

5. Typography pada Bootstrap

1. Heading (h1 – h6)
2. Text alignment (left, center, right)
3. Text color
4. Font weight
5. Lead text

6. Komponen UI Bootstrap

1. Button
2. Card
3. Alert
4. Badge
5. List group

7. Form pada Bootstrap

1. Struktur form Bootstrap
2. Input text
3. Select box
4. Checkbox dan radio button
5. Form validation sederhana

8. Navigation pada Bootstrap

1. Navbar
2. Menu navigasi
3. Dropdown menu
4. Responsive navbar
5. Menu collapse

9. Komponen Interaktif Bootstrap

1. Modal
2. Carousel / Slider
3. Collapse
4. Tooltip
5. Accordion

10. Konsep Responsive Website

1. Pengertian responsive website
2. Pentingnya responsive design
3. Mobile-first design
4. Perbedaan desktop-first dan mobile-first
5. Prinsip desain responsive

11. Breakpoint Responsive Bootstrap

Bootstrap memiliki beberapa ukuran layar standar.

12. Layout Responsive dengan Bootstrap

1. Responsive grid layout
2. Responsive image
3. Responsive typography
4. Responsive spacing
5. Responsive navbar

13. Praktik Membuat Layout Website

1. Membuat header website
2. Membuat navbar responsive
3. Membuat section hero
4. Membuat section card / produk
5. Membuat footer

14. Best Practice Desain Website Responsive

1. Gunakan grid system dengan benar
2. Prioritaskan tampilan mobile
3. Gunakan gambar yang responsive
4. Hindari ukuran tetap (fixed width)
5. Optimasi kecepatan loading website